<template>
  <div>
    <ChatHeader />
    <div :class="ChatMessagePageStyle">
      <div class="overflow-hidden">
        <ChatList />
        <ChatInput />
      </div>
      <template v-if="chat.ChatObject?.chatType != ChatType.friend">
        <GroupMemberList />
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { ChatType } from "@/types/chat";
import { useChat } from "@/store/modules/chat";
import ChatHeader from "../components/ChatHeader.vue";
import ChatList from "../components/ChatList.vue";
import ChatInput from "../components/ChatInput.vue";
import GroupMemberList from "../components/GroupMemberList.vue";

const chat = useChat();
const ChatMessagePageStyle = computed(() => {
  switch (chat.ChatObject!.chatType) {
    case ChatType.group:
      return "grid grid-cols-[minmax(0,1fr)_180px]";
    case ChatType.friend:
      return "grid grid-cols-[minmax(0,1fr)]";
    default:
      return "grid grid-cols-[minmax(0,1fr)]";
  }
});
</script>

<style lang="scss" scoped></style>
